<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>manager</title>
    <style>
        html,body{
            height: 100%;
            margin: 0 auto;
        }
        .hide{
            display: none;
        }
        .header{
            height: 50px;
            background-color:skyblue;
            line-height: 50px;
            font-size: 24px;
        }
        .leftmenu{
            width:20%;
            float: left;
            height: 100%;
            background-color: #b9def0;
            margin:0 auto;
        }
        .menu{
            border-right: 1px solid red;
            padding: 40px;
            color: red;
            cursor: pointer;

        }
        .active{
            background-color: darkslateblue;
        }
        .contain{
            width:80%;
            float: right;
            height: 100%;
            background-color: white;
            margin:0 auto;
        }
 .order  a{
     color: #aeb2b7;
 }
 .order  a:hover{
     color: #a1b2b7;
 }
 .box li{
     height: 26px;

 }
 .box li a{
     color: #999999;
 }
 .dishes  div{
     width: 950px;
     height:45px;
     margin:0  auto;

 }
 .price{
     font-weight: normal;
     font-size: 18px;
     line-height:45px ;
     color: #8c8989;
 }
 form{
     width:800px;
     height: 400px;
     /*border: 1px  solid  rebeccapurple;*/
     margin: 0  auto;
     background: #fffffc;
     /*display: none;*/
 }
 .bax{
     width:600px;
     height:55px;
     magin:0  auto;
     /*border: 1px  blue  solid;*/
 }
 .picture{
     position: fixed;
     bottom: 0;
     right: 0;
     width:400px;
     height:270px;
     border: 1px  silver  solid;
 }

 .picture  h5{
     font-size: 12px;
     margin-top: 10px;
     color:#2a3542 ;
 }
  .picture  h6{
     font-size: 14px;
     color:#2a3542 ;
     /*border: 1px   saddlebrown   solid;*/
 }
 .picture  h5 ul{
     margin-top: 4px;
 }
 .picture  h5  li{
     height: 30px;
     line-height: 30px;
 }
 .form_span{
     display: inline-block;
     width: 150px;
     height: 30px;
     color: #8c8989 ;
     font-size: 16px;
     text-align: center;
     line-height: 30px;
     margin-top: 12px;
 }
 .menu_name1{
     width: 310px;
     height: 35px;
     color: black;
     font-size: 18px;
     line-height: 35px;
     margin-top: 8px;
     margin-left: 24px;
 }
 option{
     width: 300px;
     height: 35px;
     line-height: 35px;
 }
input{
    margin-left: 30px;
}
.big{
    width: 300px;
    height:30px;
    margin-top: 10px;
}
.submit{
    width: 120px;
    height:40px;
    font-size: 18px;
    line-height: 40px;
    margin: 0  auto;
    margin-top: 20px;
    background-color: #56b4ef;
 }

    </style>
</head>
<body>
<div class="header">===后台管理系统===</div>
    <div class="leftmenu">
        <div class="menu" a="1">修改商品信息</div>
        <div class="menu" a="2">详细信息查询</div>
    </div>
    <div class="contain">
        <div class="item1" name="1">
            <div><h2 class="price">修改商品名称价格</h2></div>
            <form action="/manager/" method="post" enctype="multipart/form-data" >
                <p class="bax">
                    <span  class="form_span">请选择菜品种类：</span>
                    <select class="menu_name1" name="menu_name">
                        <option value="菜品1">菜品1</option>
                        <option value="菜品2">菜品2</option>
                        <option value="菜品3">菜品3</option>
                        <option value="菜品4">菜品4</option>
                        <option value="菜品5">菜品5</option>
                    </select>
                </p>
                <p class="bax">
                    <span  class="form_span">请选择商品序号：</span>
                    <select class="menu_name1" name="pro_id">
                        <option value="1" name="1">1</option>
                        <option value="2" name="2">2</option>
                        <option value="3" name="3">3</option>
                        <option value="4" name="4">4</option>
                        <option value="5" name="5">5</option>
                        <option value="6" name="6">6</option>
                        <option value="7" name="7">7</option>
                        <option value="8" name="8">8</option>
                        <option value="9" name="9">9</option>
                        <option value="10" name="10">10</option>
                    </select>
                </p>
                <p class="bax">
                    <span  class="form_span">请输入中文名称：</span>
                    <input type="text" name="pro" class="big">
                </p>
                <p class="bax">
                    <span  class="form_span">请输入英文名称：</span>
                    <input type="text" name="en_pro" class="big">
                </p>
                <p class="bax">
                    <span  class="form_span">请输入菜品单价：</span>
                    <input type="text" name="price" class="big">
                </p>
                <p class="bax">
                    <span  class="form_span">请修改图片地址：</span>
                    <input type="text" name="img_addr" class="big"><br>
                    <span  style="color: red; margin-left: 10px;">示例:&nbsp</span> ../static/diancan/images/index/<span style="color: red">x-x</span>.jpg
                </p>
                <div  class="upload">
                    <span style="color: #1b6d85; font-size: large" >上传文件：</span><input type="file" name="img">
                    <input type="submit" value="保存"  class="submit">
                </div>
                <div class="picture">
                    <h6><span style="color: red">*注：</span> 1、图片尺寸:160*110。 2、大小:50k-200k。  3、格式: .jpg 或 .png 或 .gif; </h6>
                    <h5><span style="color: red">菜品图片命名规则:</span>
                        <ul>
                            <li><span style="color: red">菜品1：</span>1-1.jpg  &nbsp,1-2.jpg  &nbsp,......1-10.jpg </li>
                            <li><span style="color: red">菜品2：</span>2-1.jpg  &nbsp,2-2.jpg  &nbsp,......2-10.jpg </li>
                            <li><span style="color: red">菜品3：</span>3-1.jpg  &nbsp,3-2.jpg  &nbsp,......3-10.jpg  </li>
                            <li><span style="color: red">菜品4：</span>4-1.jpg  &nbsp,4-2.jpg  &nbsp,......4-10.jpg  </li>
                            <li><span style="color: red">菜品5：</span>5-1.jpg  &nbsp,5-2.jpg  &nbsp,......5-10.jpg  </li>
                        </ul>
                    </h5>
                </div>
            </form>
        </div>
        <div class="item2 hide" name="2">
            内容2：查询信息
        </div>

    </div>



    <script src="js/jquery-1.7.1.min.js"></script>
    <script>
    $(".menu").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var num = $(this).attr("a");
            $(".contain [name='" + num + "']").removeClass("hide").siblings().addClass("hide")
        });

        $("#ll").click(function () {
            var info=$("#id1").text();
            $("#td1").append(info)
        })
    </script>
</body>

</html>